import { Component, OnInit } from '@angular/core';
import { SelectItem } from 'primeng/primeng';
import { DropdownModule } from 'primeng/primeng';
// import { City1 } from './models/city1';
import { City2 } from './models/city2';
// import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-drop-down',
  templateUrl: './drop-down.component.html',
  styleUrls: ['./drop-down.component.css']
})
export class DropDownComponent implements OnInit {

  cities1: SelectItem[];

  cities2: City2[];

  selectedCity1: City2;

  selectedCity2: City2;
  constructor() {
    this.cities1 = [
      // { label: 'Select City', value: null },
      { label: 'New York', value: { id: 1, name: 'New York', code: 'NY' } },
      { label: 'Rome', value: { id: 2, name: 'Rome', code: 'RM' } },
      { label: 'London', value: { id: 3, name: 'London', code: 'LDN' } },
      { label: 'Istanbul', value: { id: 4, name: 'Istanbul', code: 'IST' } },
      { label: 'Paris', value: { id: 5, name: 'Paris', code: 'PRS' } }
    ];

    // An array of cities
    this.cities2 = [
      { name: 'New York', code: 'NY' },
      { name: 'Rome', code: 'RM' },
      { name: 'London', code: 'LDN' },
      { name: 'Istanbul', code: 'IST' },
      { name: 'Paris', code: 'PRS' }
    ];
  }

  ngOnInit() {

  }

  onSelectedItemChange(): void {
    if (this.selectedCity1.name === 'New York') {
      this.cities2 = this.cities2.filter((c) => {
        return c.name.length > 5;
      });
    } else if (this.selectedCity1.name === 'Rome') {
      this.cities2 = this.cities2.filter((c) => {
        return c.name.length > 6;
      });
    } else {
      this.cities2 = this.cities2.filter((c) => {
        return c.name.length < 5;
      });
    }

  }

  onSelectedItemChange2(): void {
    console.log('this.selectedCity2:', this.selectedCity2);
  }

}
